<template>
  <div class="problemtrain" id="problemtrain">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="模型管理">
        <p class="problem_title">线上版本</p>
        <a-table :columns="columnsOnline" :data-source="dataOnline" :pagination="false">
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="action" slot-scope="text, record">
                  <a-button type="primary" @click="stop(text)">停用</a-button>
                </span>
        </a-table>
        <div>
          <p class="problem_title">历史版本</p>
          <div class="lishi_inner">
            <div>
              <a-button type="primary" style="margin-right:5px" @click="showModal">新建</a-button>
            </div>
          </div>
          <a-table :columns="columns" :data-source="listData" :pagination="{pageSize:5,total:this.total}"
                   @change="handleTableChange">
            <a slot="name" slot-scope="text">{{ text }}</a>
            <span slot="action" slot-scope="text, record">
                  <a-button style="margin-right: 10px" type="primary" @click="drill(text)">训练</a-button>
                  <a-button type="primary" @click="start(text)">启用</a-button>
                </span>
          </a-table>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
const {postAction} = require("../../api/manage");
const {getAction} = require("../../api/manage");
const {putAction} = require("../../api/manage");
const columnsOnline = [
  {
    title: '模型名称',
    dataIndex: 'modelName',
    key: 'modelName',
    scopedSlots: {customRender: 'name'}
  },
  {
    title: '模型条数',
    dataIndex: 'knowledgePoints',
    key: 'knowledgePoints'
  },
  {
    title: '模型路径',
    dataIndex: 'modelPath',
    key: 'modelPath',
  },
  {
    title: '模型状态',
    key: 'modelStatus_dictText',
    dataIndex: 'modelStatus_dictText',
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'}
  }
];
const columns = [
  {
    title: '模型名称',
    dataIndex: 'modelName',
    key: 'modelName',
    scopedSlots: {customRender: 'name'}
  },
  {
    title: '模型条数',
    dataIndex: 'knowledgePoints',
    key: 'knowledgePoints'
  },
  {
    title: '模型路径',
    dataIndex: 'modelPath',
    key: 'modelPath'
  },
  {
    title: '模型状态',
    key: 'modelStatus_dictText',
    dataIndex: 'modelStatus_dictText',
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'}
  }
]

const dataOnline = []
const listData = []
export default {
  data() {
    return {
      pages: 0,    //分页页码
      drillId: '',   //训练方法Id
      labelCol: {span: 4},
      wrapperCol: {span: 20},
      total: 0,    //条数
      listData,   //历史版本数据
      dataOnline,   //线上版本数据
      columns,    //历史版本Table
      columnsOnline,    //线上版本Table
    }
  },
  created() {

  },
  mounted() {
    this.getDataOnline()
    this.getData()
  },
  methods: {
    getData: function () {    //获取历史版本数据
      getAction('/nlpcs/modelRecord/list', {
        pageNo: 1,
        pageSize: 5
      })
        .then(res => {
          console.log(res)
          this.listData = []
          for (let i = 0; i < res.result.records.length; i++) {
            this.listData.push(res.result.records[i])
            this.total = res.result.total
          }
          console.log(this.listData)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getDataOnline() {    //获取线上版本数据
      this.dataOnline = []
      getAction('/nlpcs/modelRecord/list', {
        modelStatus:1
      })
        .then(res => {
          console.log(res)
          for (let i = 0; i < res.result.records.length; i++) {
            this.dataOnline.push(res.result.records[i])
            this.total = res.result.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleTableChange(page) {    //table分页调用方法
      this.pages = page.current
      let register = {
        pageNo: page.current,
        pageSize: 5
      }
      getAction('/nlpcs/modelRecord/list', register)
        .then(res => {
          console.log(res)
          this.listData = []
          for (let i = 0; i < res.result.records.length; i++) {
            this.listData.push(res.result.records[i])
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    showModal() {   //新增按钮点击事件
      postAction("/nlpcs/modelRecord/add", {})
        .then(res => {
          if (res.code == 200) {
            this.$message.info('创建成功!');
            this.getData()
            getAction('/nlpcs/modelRecord/list', {pageNo: this.pages})
              .then(res => {
                console.log(res)
                this.listData = []
                for (let i = 0; i < res.result.records.length; i++) {
                  this.listData.push(res.result.records[i])
                }
              })
              .catch(err => {
                console.log(err)
              })
          } else {
            this.$message.error('创建失败!');
          }
          console.log(res)
        })
        .catch(err => {
          this.$message.error('创建失败!');
          console.log(err)
        })
    },
    drill(text) {    //训练模型方法
      postAction("/nlpcs/modelRecord/dealModel", {
        id: text.id
      })
        .then(res => {
          this.getData()
          getAction('/nlpcs/modelRecord/list', {pageNo: this.pages})
            .then(res => {
              console.log(res)
              this.listData = []
              for (let i = 0; i < res.result.records.length; i++) {
                this.listData.push(res.result.records[i])
              }
            })
            .catch(err => {
              console.log(err)
            })
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },
    start: function (text) {    //启用按钮方法
      putAction('/nlpcs/modelRecord/edit', {
        id: text.id,
        modelName: text.modelName,
        knowledgePoints: text.knowledgePoints,
        modelPath: text.modelPath,
        modelStatus: 1,
      })
        .then(res => {
          this.getData()
          this.getDataOnline()
          getAction('/nlpcs/modelRecord/list', {pageNo: this.pages})
            .then(res => {
              console.log(res)
              this.listData = []
              for (let i = 0; i < res.result.records.length; i++) {
                this.listData.push(res.result.records[i])
              }
            })
          // console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },
    stop(text) {   //停用按钮方法
      putAction('/nlpcs/modelRecord/edit', {
        id: text.id,
        modelName: text.modelName,
        knowledgePoints: text.knowledgePoints,
        modelPath: text.modelPath,
        modelStatus: 0,
      })
        .then(res => {
          this.getData()
          this.getDataOnline()
          getAction('/nlpcs/modelRecord/list', {pageNo: this.pages})
            .then(res => {
              console.log(res)
              this.listData = []
              for (let i = 0; i < res.result.records.length; i++) {
                this.listData.push(res.result.records[i])
              }
            })
          // console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style>
.problemtrain {
  margin: 40px;
  min-height: calc(100vh - 80px);
}

.lishi_inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.problem_title {
  margin-top: 20px;
  font-size: 25px;
}

.tab2_title {
  font-size: 20px;
  color: black;
  margin-top: 23px;
  font-weight: 600;
}

.debug_inner {
  margin-bottom: 20px;
}
</style>